<template>
	<view class="container">
		<view class="p-30">
			<view class="user-item p-20 mb-20 bg-white border-radius-base">
				<cos-avatar @tap="jumpUser(postUser.uuid)" class="mr-20" :src="postUser.avatar" :showSex="true" :sexIcon="postUser.gender_label"></cos-avatar>
				<view class="user-item-user">
					<view class="d-flex align-items-center mb-10">
						<view class="user-name font-size-lg mr-10">{{ postUser.nickname }}</view>
						<view class="tag-box d-flex" v-if="postUser.is_guaranty || postUser.is_cert">
							<view class="mr-10 tag tag-guaranty" v-if="postUser.is_guaranty==1"><u-icon name='rmb' color="#ffffff" size='23'></u-icon>已担保</view>
							<view class="mr-10 tag tag-cert" v-if="postUser.is_cert==1"><u-icon name='account-fill' color="#ffffff" size='23'></u-icon>已认证</view>
						</view>
					</view>
					<view class="cxplain">
						<text class="mr-10" v-if="postUser.city || postUser.province">{{postUser.city || postUser.province}} |</text>
						<text class="mr-10">{{ postUser.identity_label }}</text>
					</view>
				</view>
				<view class="follow">
					<button class="border-radius-lg font-size-sm" v-if="postUser.is_follow" type="default" @tap="follow">已关注</button>
					<button class="border-radius-lg font-size-sm" v-else type="primary" @tap="follow">关注</button>
				</view>
			</view>
			
			<view class="p-30 bg-white mb-20 section border-radius-base address">
				<view class="font-size-lg font-weight-bold mb-30 title"><view style="width: 12rpx;background-color: #EED146;height: 36rpx;display: inline-block;vertical-align: -6rpx;border-radius: 20rpx;margin-right: 20rpx;"></view>{{type_label}}需求</view>
				<textarea type="text" placeholder-class="line" :placeholder="'请输入'+type_label+'需求～'" v-model="demand" />
			</view>
			<view class="p-30 bg-white mb-40 section border-radius-base">
				<view class="mb-20 title d-flex justify-content-between">
					<view class='font-size-lg font-weight-bold'><view style="width: 12rpx;background-color: #EED146;height: 36rpx;display: inline-block;vertical-align: -6rpx;border-radius: 20rpx;margin-right: 20rpx;"></view>我的联系方式 <text class="text-color-assist font-size-sm ml-20 font-weight-normal">(确保准确)</text> </view>
					<view class="text-color-primary" @tap="editContact"><u-icon class='mr-10' name='edit-pen'></u-icon>修改</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist" style="width: 120rpx;">手机号:</view>
					<view v-if="contact.mobile">{{contact.mobile}} <text class="text-color-assist ml-10">({{contact.is_show_mobile?'展示':'不展示'}})</text>		</view>
				</view>
				<view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist" style="width: 120rpx;">微信号:</view>
					<view>{{contact.wechat_no}}</view>
				</view>
				<!-- <view class="mb-10 d-flex">
					<view class="mr-20 text-color-assist flex-shrink-0" style="width: 120rpx;">收货地址:</view>
					<view>{{contact.province}} {{contact.city}} {{contact.area}} {{contact.address}}</view>
				</view> -->
			</view>
			<view class="font-size-base" style="color: #9A9A9A;">
				<view class="mb-10">温馨提示：</view>
				<view class="mb-10">1.平台禁止一切电商刷单约拍。</view>
				<view class="mb-10">2.平台禁止一切色情私房约拍。</view>
				<view class="mb-10">3.切勿独自与陌生人在室内约拍。</view>
				<view class="mb-10">4.切勿轻易相信未见面先缴纳费用或定金的合作，发生经济纠结平台概不负责。</view>
				<view class="mb-10">5.涉及收费合作，可使用金币作为尾款担保，合作完成后金币可提现。</view>
			</view>
		</view>
		
		<!--  end -->
		<view class="sign-up-footer d-flex justify-content-between align-items-center">
			<view class="font-size-lg font-weight-bold ml-30">
				<view class="text-color-primary font-weight-bold"><text class="font-size-extra-lg">2</text><text class="font-size-base">人人豆</text></view>
				<text class="text-color-assist font-size-sm">剩余：{{userInfo.beans}}人人豆</text>
			</view>
			<button type="primary" @tap='apply'>确认提交</button>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			post_id:"",
			type:'',
			type_label:'',
			applyShootWho:"",
			demand:"",
		}
	},
	computed:{
		...mapState(['hasLogin', 'userInfo', 'contact', 'postUser']),
	},
	onLoad(options) {
		this.post_id = options.post_id;
		this.type    = options.type;
		if(this.type=='shoot') {
			this.type_label = "约拍"
		}else if(this.type=='album') {
			this.type_label = "联系"
		}
	},
	methods:{
		...mapMutations(['setPostUser']),
		apply() {		
			if(!this.contact) {
				this.$u.toast('请完善联系方式！'); return;
			}
			
			if(!this.contact.wechat_no) {
				this.$u.toast('联系微信号不能为空！'); return;
			}
			
			if(!this.demand) {
				this.$u.toast('备注需求不能为空！'); return;
			}
			
			let that = this;
			uni.showModal({
				title: '提示',
				content: '提交'+this.type_label+'申请需消耗2个人人豆～',
				confirmText:'确认提交',
				success (res) {
					if (res.confirm) {
						that.request();
					} 
				}
			});
		},
		request() {
			uni.showLoading({
				mask: true,
				title: '提交中...'
			});
			uni.navigateTo({
				url:"/pages/jump/jump?txt=申请成功"
			})
			uni.hideLoading();
		},
		follow() {		
			let title = this.postUser.is_follow?'取消关注中...':'关注中...';
			uni.showLoading({mask: true,title: title});
			uni.hideLoading()
		},
		editContact() {
			uni.navigateTo({
				url:"/pages/my/contact"
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.container {
		height: auto;
		padding-bottom: 120rpx;
	}	
	.section {
		box-sizing: border-box;
		
		textarea {
			background-color: #f7f7f7;
			padding: 30rpx;
			width: 100%;
			height: 200rpx;
		}
	}
	
	.user-item {
		display: flex;
		justify-content: center; // 内容自适应：上下居中
		align-items: center; // 子项对齐方式：左右居中
		
		.user-item-user {
			flex: 1;
			
			.cxplain {
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
		
		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	
	.sign-up-footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		background-color: #FFFFFF;
		z-index: 10;
		padding: 20rpx 10rpx;
		
		button {
			height: 100%;
			font-size: $font-size-lg;
			border-radius: 100rpx !important;
			line-height: 80rpx;
			padding: 0 80rpx;
		}
	}
.tag-box {
	.tag{
		padding: 0rpx 10rpx;
		border-radius: 5rpx;
		font-size: 22rpx;
		background-color: #f5f5f5;
		color: #616161;
	}
	
	.tag-guaranty {
		color: #ffffff;
		background-color: #24B19A;
	}
	
	.tag-cert {
		color: #ffffff;
		background-color: #5A84FB;
	}
}
</style>
